import { ref, triggerRef, toRef } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentInstance } from 'vue'
import { showNotify } from 'vant'

// import { useAsyncValidator } from 'async-validator'
export const useLogin = () => {
  // 获取组件实例
  const { proxy } = getCurrentInstance()
  const $router = useRouter()
  const username = ref('')
  const password = ref('')
  const truename = ref('')
  const telnumber = ref('')
  // 控制登录和注册页面的切换
  let switchLogin = ref(true)
  let switchRegister = ref(false)
  // 验证登录规则
  const rules = ref({
    username: [
      //必选字段 required: true
      { required: true, message: '请填写用户名', trigger: 'onBlur' },
      //pattern	通过正则表达式进行校验，正则无法匹配表示校验不通过
      {
        pattern: /^[0-9a-zA-Z_]{3,12}$/,
        message: '用户名的长度为3~12个字符,名字为大小写字母/数字/下划线',
        trigger: 'onBlur',
      },
    ],
    password: [
      { required: true, message: '请填写密码', trigger: 'onBlur' },
      {
        pattern: /^[0-9]{6,12}$/,
        message: '用户名的长度为6~12个字符,密码只能为数字',
        trigger: 'onBlur',
      },
    ],
  })
  // 验证注册规则
  const registerRules = ref({
    username: [
      //必选字段 required: true
      { required: true, message: '请填写用户名', trigger: 'onBlur' },
      //pattern	通过正则表达式进行校验，正则无法匹配表示校验不通过
      {
        pattern: /^[0-9a-zA-Z_]{3,12}$/,
        message: '用户名的长度为3~12个字符,名字为大小写字母/数字/下划线',
        trigger: 'onBlur',
      },
    ],
    password: [
      { required: true, message: '请填写密码', trigger: 'onBlur' },
      {
        pattern: /^[0-9]{6,12}$/,
        message: '用户名的长度为6~12个字符,密码只能为数字',
        trigger: 'onBlur',
      },
    ],
    truename: [
      { required: true, message: '请填写真实名字', trigger: 'onBlur' },
      {
        pattern: /^[0-9a-zA-Z_]{3,12}$/,
        message: '真实名字的长度为3~12个字符,名字为大小写字母/数字/下划线',
        trigger: 'onBlur',
      },
    ],
    telnumber: [
      { required: true, message: '请填写手机号码', trigger: 'onBlur' },
      {
        pattern: /^[0-9]{11}$/,
        message: '手机号码的长度为11个字符,手机号码只能为数字',
        trigger: 'onBlur',
      },
    ],
  })

  // 获取表单组件实例
  const formRef = ref(null)
  // 重置
  const onReset = () => {
    // console.log(formRef.value)
    if (!formRef.value) return
    formRef.value.resetValidation()
    // console.log(formRef.value.getValues())
    username.value = ''
    password.value = ''
  }
  // 切换成登录
  const onSwitchLogin = () => {
    switchLogin.value = true
    switchRegister.value = false
    // 重置用户名和密码
    if (!formRef.value) return
    formRef.value.resetValidation()
    username.value = ''
    password.value = ''
  }
  //登录
  const onSubmit = async (values) => {
    if (values) {
      // console.log(values)
      const res = await proxy.$http.post(`/login`, values)
      // console.log(res)
      // console.log(res.result.user_existstatus)
      // 只能用普通用户登录
      if (res.result.user_existstatus == '存在') {
        if (res.code == 10000) {
          //普通用户登录成功,
          //前置导航守卫判断值
          localStorage.setItem('isLogin', 2)
          // 在头文件中增加一个authization值
          localStorage.setItem('authorization', res.result.token)
          // 用户类型
          localStorage.setItem('user_type', res.result.user_type)
          // 用户名
          localStorage.setItem('user_username', res.result.user_username)
          // 用户ID
          localStorage.setItem('common_use_id', res.result.use_id)

          // 发送请求修改该用户的登录状态
          proxy.$http.put(`/user/${res.result.use_id}`, {
            user_onlinestatus: '已登录',
          })
          // 导航到home页面
          $router.push('/home')
          showNotify({ type: 'success', message: '登录成功', duration: 1500 })
        } else if (res.code == 0) {
          showNotify({ type: 'warning', message: '该用户权限过高,请注册新账号!!!', duration: 1500 })
        }
      } else if (res.code == 10001) {
        showNotify({ type: 'danger', message: '用户名或密码错误', duration: 1500 })
      } else {
        showNotify({ type: 'danger', message: '用户不存在', duration: 1500 })
      }
    }
  }

  // 切换成注册
  const onSwitchRegister = () => {
    switchLogin.value = false
    switchRegister.value = true
    // 重置用户名和密码
    if (!formRef.value) return
    formRef.value.resetValidation()
    // console.log(formRef.value.getValues())
    username.value = ''
    password.value = ''
  }
  // 注册
  const onRegister = async (values) => {
    if (values) {
      const res = await proxy.$http.post('/register', values)
      if (res.code == 101) {
        showNotify({ type: 'warning', message: '该用户名已被占用', duration: 2000 })
      } else if (res.code == 0) {
        showNotify({ type: 'success', message: '用户注册成功', duration: 2000 })
        // 切换回登录页面
        setTimeout(() => {
          switchLogin.value = true
          switchRegister.value = false
          // 重置输入信息
          username.value = ''
          password.value = ''
          truename.value = ''
          telnumber.value = ''
        }, 2000)
      } else {
        showNotify({ type: 'danger', message: '用户注册失败!!!', duration: 2000 })
      }
    }
  }
  // 忘记密码(修改密码)
  const updatePassword = () => {
    showNotify({ type: 'primary', message: '功能在开发中...', duration: 2000 })
  }
  return {
    registerRules,
    truename,
    telnumber,
    switchLogin,
    switchRegister,
    formRef,
    username,
    password,
    rules,
    onSubmit,
    onReset,
    onRegister,
    updatePassword,
    onSwitchRegister,
    onSwitchLogin,
  }
}
